{% extends 'base.html' %}
{% block title %}BGP 管理{% endblock %}
{% block body %}
    <div class="panel">
        <div class="panel-title">
            <h3 class="fleft">
                BGP 管理
                <span class="layui-badge-rim c-green font-iosevka">
                    BGP IP 及关联 ASN 管理
                </span>
            </h3>
            <div class="fright">
                <form id="frm_search" class="layui-form" lay-filter="frm_search">
                    <div class="layui-inline">
                        <label>BGP IP：</label>
                        <div class="layui-input-inline">
                            <input name="bgp_ip" type="text" class="layui-input txt-focus" value=""
                                   placeholder="BGP 管理 IP">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label>ASN：</label>
                        <div class="layui-input-inline">
                            <input name="bgp_asn" type="text" class="layui-input txt-focus" value=""
                                   placeholder="关联的 AS 号">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div>
                            <button class="layui-btn btn-default" lay-submit="" lay-filter="btn_search"
                                    id="btn_search" type="submit">
                                <i class="ficon icon-search_list"></i>BGP 查询
                            </button>
                        </div>
                    </div>
                    {% if is_can('bgp.bgp_add') %}
                        <div class="layui-inline">
                            <div>
                                <button id="f_btn_add" class="layui-btn btn-success" type="button"><i
                                        class="ficon icon-jia"></i>新增 BGP
                                </button>
                            </div>
                        </div>
                    {% endif %}
                </form>
            </div>
        </div>
        <div class="panel-box pl25">
            <div id="grid_main">
                <table id="tbl_main" lay-filter="tbl_main"></table>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <div id="div_add" class="layer-pop">
        <form class="layui-form layui-form-pane" lay-filter="frm_add" id="frm_add">
            <div class="layui-form-item">
                <label class="layui-form-label">BGP IP：</label>
                <div class="layui-input-block">
                    <input name="bgp_ip" type="text" class="layui-input txt-focus" value=""
                           placeholder="BGP 管理 IP" lay-verify="required" lay-vertype="tips">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所属 ASN：</label>
                <div class="layui-input-block">
                    <input name="bgp_asn" type="text" class="layui-input txt-focus" value=""
                           placeholder="BGP 关联的 ASN" lay-verify="required" lay-vertype="tips">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">测试字段：</label>
                <div class="layui-input-block">
                    <input name="bgp_test_float" type="text" class="layui-input txt-focus" value=""
                           placeholder="浮点数, 保留2位小数" lay-verify="required" lay-vertype="tips">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">BGP 描述信息：</label>
                <div class="layui-input-block">
                    <textarea name="bgp_desc" class="layui-textarea txt-focus"
                              placeholder="描述内容换行等格式无效" lay-verify="required" lay-vertype="tips"></textarea>
                </div>
            </div>
            <div class="center">
                <button class="layui-btn layui-btn-sm btn-primary" type="submit" lay-submit lay-filter="btn_add_save">
                    <i class="ficon icon-gou"></i>保 存
                </button>
                <button class="layui-btn layui-btn-sm btn-warning" id="btn_add_close" type="button">
                    <i class="ficon icon-cha"></i>取 消
                </button>
            </div>
        </form>
    </div>
    <script type="text/html" id="bar_action">
        <div class="layui-btn-group">
            {% if is_can('bgp.bgp_delete') %}
                <a class="layui-btn layui-btn-sm btn-brown" lay-event="delete">删除</a>
            {% endif %}
        </div>
    </script>
    <script>
        $(function () {
            const BTN_SEARCH = $('#btn_search');
            const FRM_SEARCH = $('#frm_search');
            let FN = {
                // 主表
                tb_main: function (d, s) {
                    let height = $('#grid_main').height();
                    height < 222 && (height = 345);
                    // 字段设置, 可由其他 js 引入或由后端生成, 与 table 配置解耦
                    var def = {
                        before: [
                            {type: 'numbers'}
                        ],
                        main: {
                            'bgp_ip': {title: 'BGP 管理 IP', width: 140, sort: true},
                            'bgp_asn': {title: 'ASN', width: 100, sort: true},
                            'bgp_update': {title: '最后更新', width: 170, sort: true},
                            'bgp_desc': {title: 'BGP 描述'},
                            // 一个表格多个不固定数据源时, 这里可以是所有字段格式的集合
                            // 表格会按后端传过来的字段集中字段名自动匹配并渲染
                            'days_last_month_peak_rate': {
                                title: '没用到的字段, 没关系', width: 160, align: 'right',
                                templet: function (d) {
                                    return '<span style="color:'
                                        + (d.days_last_month_peak_rate > 0 ? '#df5640' : '#46be8a') + '">'
                                        + (Math.round(d.days_last_month_peak_rate * 10000) / 100).toFixed(2)
                                        + '%</span>';
                                }
                            },
                            'bgp_test_float': {
                                title: '右对齐(金额)', width: 140, align: 'right',
                                templet: function (d) {
                                    return '￥' + d.bgp_test_float;
                                }
                            },
                            // 指定隐藏显示该字段
                            'bgp_test_hide1': {hide: true},
                            'days_desc': {title: '备注', align: 'left', width: 180}
                        },
                        main_add: {
                            // 在某个字段之后附加字段, 可以是多个
                            'bgp_asn': [
                                {
                                    title: 'ASN后增加的字段', width: 180,
                                    templet: function (d) {
                                        return 'demo.main_add: ' + d['bgp_asn'];
                                    }
                                },
                                {title: '可以有多个', templet: '<div>常用于前端计算和显示百分比字段</div>'}
                            ],
                            'total_avg': [
                                {
                                    title: '总延迟%',
                                    templet: function (d) {
                                        return '<div>' + (d["total_avg"] / d["total_valid"] * 100).toFixed(2) + '%</div>';
                                    }
                                }
                            ]
                        },
                        after: [{title: '操作', width: 100, align: 'center', fixed: 'right', toolbar: '#bar_action'}]
                    };
                    let cfg = {
                        id: 'tbl_main',
                        elem: '#tbl_main',
                        even: true,
                        height: height,

                        page: true,
                        // 开启 dataPage: true 则为前端分页, 先在后端请求所有数据, 再前端分页
                        // dataPage: true,
                        // 每页显示数量, 演示分页, 这里一般默认 60
                        limit: 1,
                        // 后端分页时指定请求方法与后端一致
                        method: 'POST',

                        loading: true,

                        // 排序时后端排序
                        initSort: s || {field: 'bgp_update', type: 'asc'},
                        autoSort: false,

                        // 可指定要显示的字段, 且按指定的顺序显示到表格
                        // 当列表中有后端结果集中不存在的字段时, 自动显示为空
                        // 不指定则表格自动按后端返回的数据集中的字段匹配 def 后显示
                        // bgp_ip_id, bgp_test_hide2 没被选择, 自动被隐藏
                        colsFields: ['bgp_ip', 'bgp_asn', 'bgp_test_float', 'non_existent', 'bgp_update', 'bgp_desc'],
                        // 默认居中显示, 在字段中指定的对齐方式优先
                        colsAlign: 'center',

                        // 也可以使用原生的固定字段方式
                        // cols: [[
                        //    {type: 'numbers'},
                        //    {field: 'bgp_ip', title: 'BGP 管理 IP', width: 140, sort: true},
                        //    {field: 'bgp_asn', title: 'ASN', width: 100, sort: true},
                        //    {field: 'bgp_update', title: '最后更新', width: 170, sort: true},
                        //    {field: 'bgp_desc', title: 'BGP 描述'},
                        //    {title: '操作', width: 100, align: 'center', fixed: 'right', toolbar: '#bar_action'}
                        //]],
                        d: {
                            url: '{{ url_for('bgp.bgp_list') }}',
                            where: d || FRM_SEARCH.serializeJson()
                        }
                    };
                    $.autoTbl(cfg, def);
                },
                // 新增
                add: function () {
                    FN.reset_form('#frm_add');
                    layer.open({
                        title: '新增 BGP',
                        type: 1,
                        content: $('#div_add'),
                        success: function (layero, index) {
                            form.on('submit(btn_add_save)', function (d) {
                                var btn = $(this);
                                $.mkAjax(d.field, '{{ url_for('bgp.bgp_add') }}',
                                    '新增 BGP', function (r) {
                                        BTN_SEARCH.trigger('click');
                                        index && layer.close(index);
                                    }, btn);
                                return false;
                            });
                            $('#btn_add_close').on('click', function () {
                                index && layer.close(index);
                            });
                        }
                    });
                    return false;
                },
                // 删除
                delete: function (d) {
                    let txt = '确定删除 BGP :<br><b>' + d.bgp_ip + '</b>';
                    layer.confirm(txt, {icon: 3, title: '请仔细核对'}, function () {
                        $.mkAjax({bgp_ip: d.bgp_ip}, '{{ url_for('bgp.bgp_delete') }}',
                            '确定删除 BGP ', function (r) {
                                BTN_SEARCH.trigger('click');
                            });
                    });
                    return false;
                },
                // 弹出层大小
                get_pop_area: function () {
                    let w = $(window).width();
                    let h = $(window).height();
                    w = w > 880 ? 880 : (w - 20);
                    h = h > 600 ? 600 : h;
                    return [w, h];
                },
                // 清除表单
                reset_form: function (dom) {
                    if ($(dom).length) {
                        $(dom)[0].reset();
                        form.render();
                    }
                }
            };

            FN.tb_main();

            // 删除
            table.on('tool(tbl_main)', function (obj) {
                obj.event === 'delete' && FN.delete(obj.data);
            });

            // 查询
            form.on('submit(btn_search)', function (data) {
                FN.tb_main(data.field);
                return false;
            });

            // 新增
            $('#f_btn_add').on('click', function () {
                FN.add();
            });

            // 排序
            table.on('sort(tbl_main)', function (obj) {
                let where = FRM_SEARCH.serializeJson();
                where['order__field'] = obj.field;
                where['order__type'] = obj.type;
                FN.tb_main(where, obj);
            });
        });
    </script>
{% endblock %}